<template>
  <div class="dialog">
    <el-dialog v-model="dialogVisible" title="详情" width="35%" :before-close="handleClose" :modal="false" draggable>
      <div class="dialog-line"></div>
      <div class="dialog-con">
        <el-form :model="formDetail.form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请人"> <el-input v-model="formDetail.form.apply_user" disabled /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="申请类型"> <el-input v-model="formDetail.form.type_name" disabled /> </el-form-item
            ></el-col>
          </el-row>
          <el-row style="margin-top: 14px">
            <el-col :span="12">
              <el-form-item label="申请电话">
                <el-input v-model="formDetail.form.apply_mobile" disabled /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="申请时间"> <el-input v-model="formDetail.form.created_at" disabled /> </el-form-item
            ></el-col>
          </el-row>
          <el-row style="margin-top: 14px">
            <el-col :span="12">
              <el-form-item label="单位名称">
                <el-input v-model="formDetail.form.apply_user_unit" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态"> <el-input v-model="formDetail.form.status" disabled /> </el-form-item
            ></el-col>
          </el-row>
          <el-row style="margin-top: 14px" v-if="formDetail.type === 'change_unit'">
            <el-col :span="12">
              <el-form-item label="变更单位"> <el-input v-model="formDetail.form.unit_name" disabled /> </el-form-item
            ></el-col>
          </el-row>
          <div v-if="formDetail.type === 'unit_register' || formDetail.type === 'reset_unit_password'">
            <div class="dialog-con-enclosure">
              <p>附件</p>
              <div class="dialog-con-enclosure-left" @click="clickLeft">
                <img src="@/assets/img/apply/icon_4.png" alt="" />
                <a>申请表</a>
              </div>
              <div class="dialog-con-enclosure-right" @click="clickRight">
                <img src="@/assets/img/apply/icon_5.png" alt="" />
                <a>身份证</a>
              </div>
            </div>
            <div class="dialog-con-examine" v-if="formDetail.status !== -1">
              <p>审核通过</p>
              <div class="dialog-con-examine-form">
                <el-form size="small" :inline="true" :model="formDetail.formUnit" label-width="75px">
                  <el-form-item label="单位代码">
                    <el-input
                      v-model.trim="formDetail.formUnit.unit_code"
                      placeholder="请输入"
                      maxLength="40"
                      disabled
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="单位密码">
                    <el-input
                      v-model.trim="formDetail.formUnit.unit_password"
                      placeholder="请输入"
                      maxLength="40"
                      :disabled="formDetail.status === 1"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div
                  :style="formDetail.form.status === '待审核' ? 'cursor: pointer;' : 'cursor:not-allowed'"
                  class="dialog-con-examine-form-btn"
                  @click="clickAdopt"
                >
                  通过
                </div>
              </div>
            </div>
            <div class="dialog-con-examine">
              <p>审核驳回</p>
              <div class="dialog-con-examine-main">
                <el-input v-model="formDetail.formUnit.reason" type="textarea" placeholder="请输入驳回原因…" />
                <div
                  :style="formDetail.form.status === '待审核' ? 'cursor: pointer;' : 'cursor:not-allowed'"
                  class="dialog-con-examine-main-btn"
                  @click="clickReject"
                >
                  驳回
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="dialog-line"></div>
      <template #footer>
        <span class="dialog-footer" v-if="formDetail.type === 'change_unit' || formDetail.type === 'user_register'">
          <el-button :disabled="formDetail.form.status !== '待审核'" @click="clickReject">驳回</el-button>
          <el-button
            :disabled="formDetail.form.status !== '待审核'"
            class="search-btn-sear"
            type="primary"
            @click="clickAdopt"
            >通过</el-button
          >
        </span>
        <span
          class="dialog-footer"
          v-if="formDetail.type === 'unit_register' || formDetail.type === 'reset_unit_password'"
        >
          <el-button @click="handleClose">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted, watch, defineProps, defineEmits} from 'vue';
import {ElMessage} from 'element-plus';
import manageApi from '@/api/manage.ts';

// 表单相关
const formDetail = reactive({
  form: {},
  formUnit: {},
  excelUrl: '',
  cardUrl: '',
  status: '',
  type: '',
});

const dialogVisible = ref(true);
const applyId = ref('');
const statusDec = ref({'0': '待审核', '1': '审核通过', '-1': '审核驳回'});
const typeDec = ref({
  user_register: '用户注册',
  unit_register: '单位注册',
  change_unit: '单位变更',
  reset_unit_password: '密码重置',
});

const emit = defineEmits(['closeDialog', 'clickReject', 'clickPast']);

const props = defineProps({
  dialogVisible: Boolean,
  applyId: String,
});

const handleClose = () => {
  emit('closeDialog');
};
// 下载相关
const clickLeft = () => {
  window.open(formDetail.excelUrl);
};
const clickRight = () => {
  window.open(formDetail.cardUrl);
};
// 通过
const clickAdopt = () => {
  if (formDetail.form.status === '审核通过') {
    return;
  }
  manageApi
    .applyProcess({
      id: props.applyId,
      status: '1',
      unit_code: formDetail.formUnit.unit_code,
      unit_password: formDetail.formUnit.unit_password,
    })
    .then((res) => {
      if (res.status === 0) {
        ElMessage.success(res.message);
        emit('clickPast');
      }
    })
    .catch((err) => {});
};

// 驳回
const clickReject = () => {
  if (formDetail.form.status === '审核通过') {
    return;
  }
  manageApi
    .applyProcess({
      id: props.applyId,
      status: '-1',
      reason: formDetail.formUnit.reason,
    })
    .then((res) => {
      if (res.status === 0) {
        ElMessage.success(res.message);
        emit('clickPast');
      }
    })
    .catch((err) => {
      throw err;
    });
  emit('clickReject');
};

// 获取详情数据
const getApplyDetails = () => {
  manageApi
    .applyDetails({id: props.applyId})
    .then((res) => {
      formDetail.status = res.data.status;
      formDetail.type = res.data.type;
      formDetail.form = {
        apply_user: res.data.apply_user,
        type_name: typeDec.value[res.data.type],
        apply_mobile: res.data.apply_mobile,
        apply_user_unit:
          typeDec.value[res.data.type] === '单位变更' ? res.data.apply_user_unit : res.data.data.unit_name,
        created_at: res.data.created_at,
        status: statusDec.value[res.data.status.toString()],
        unit_name: res.data.data.unit_name,
      };
      formDetail.formUnit = {
        unit_code: res.data.data.unit_code,
        unit_password: res.data.data.unit_password,
        reason: res.data.reason,
      };
      formDetail.excelUrl = res.data.data.apply_table_file_url;
      formDetail.cardUrl = res.data.data.apply_id_card_file_url;
    })
    .catch((err) => {
      throw err;
    });
};

onMounted(() => {
  getApplyDetails();
});
</script>
<style lang="scss" scoped>
.dialog {
  &:deep(.el-dialog__headerbtn) {
    &:hover {
      border: 0;
    }
  }
  &:deep(.el-dialog__body) {
    padding: 0;
  }
  .el-input {
    width: 236px;
  }
  &-con {
    padding: 24px 36px;
    p {
      width: 80px;
      text-align: right;
    }
    &-enclosure {
      display: flex;
      &-left {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin: 0 34px 0 5px;
        > a {
          text-decoration: underline #1890ff;
          color: #1890ff;
        }
      }
      &-right {
        cursor: pointer;
        display: flex;
        align-items: center;
        > a {
          text-decoration: underline #00dac8;
          color: #00dac8;
        }
      }
    }
    &-examine {
      display: flex;
      padding-top: 20px;
      > p {
        margin: 0;
      }
      &-form {
        width: 564px;
        height: 132px;
        margin-left: 10px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        position: relative;
        .el-form {
          padding-top: 5px;
          padding-left: 12px;
          .el-form-item {
            margin-top: 14px;
          }
          &:deep(.el-form-item__label) {
            text-align: right !important;
          }
        }
        &-btn {
          width: 52px;
          height: 27px;
          border-radius: 3px;
          border: 1px solid #1890ff;
          text-align: center;
          line-height: 27px;
          color: #1890ff;
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
      &-main {
        width: 564px;
        height: 132px;
        margin-left: 10px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        position: relative;
        &:deep(.el-textarea__inner) {
          width: 335px;
          height: 88px;
          background: #ffffff;
          border-radius: 0px 2px 2px 0px;
          margin: 20px 0 0 20px;
          padding-top: 5px;
          padding-left: 12px;
          color: rgba(0, 0, 0, 0.25);
        }
        &-btn {
          width: 52px;
          height: 27px;
          border-radius: 3px;
          text-align: center;
          line-height: 27px;
          border: 1px solid #ff0000;
          color: #ff0000;
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
    }
  }
  .dialog-line {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
  }
  &:deep(.el-textarea__inner) {
    color: #333;
  }
}
@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .dialog {
    &:deep(.el-dialog) {
      width: 40% !important;
    }
  }
}
</style>
